<template>
  <div style="margin-top:30px">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" :key="key" >
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="商品条码" prop="goodsBarCode" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.goodsBarCode" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="货品名称" prop="goodsName" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.goodsName" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="单位" prop="goodsName" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.unitName" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="可用数量" prop="canUseQuantity" style="margin-right:15px" label-width="120px">
              <el-input v-model="canUseQuantity" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="调整数量" prop="adjustQuantity" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.adjustQuantity" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="货品状态" prop="goodsStatus" style="margin-right:15px" label-width="120px">
              <inventoryStatusSelect ref="inventoryStatusSelectRef" @setInventoryStatus="setInventoryStatus" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 动态字段 -->
      <el-row v-if="this.form.batchRuleVO.gmtManufacture == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="生产日期" prop="commercialDueDate" style="margin-right:15px" label-width="120px">
              <el-date-picker
                v-model="form.gmtManufacture"
                type="date"
                placeholder="请输入生产日期"
                value-format="yyyy-MM-dd"
                style="width:100%"
              />
            </el-form-item>

          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.gmtExpire == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="过期日期" prop="commercialDueDate" style="margin-right:15px" label-width="120px">
              <el-date-picker
                v-model="form.gmtExpire"
                type="date"
                placeholder="请输入过期日期"
                value-format="yyyy-MM-dd"
                style="width:100%"
              />
            </el-form-item>

          </div>
        </el-col>
      </el-row>

      <el-row v-if="this.form.batchRuleVO.supplier == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="供应商" prop="supplier" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.supplier" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.serialNumber == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="序列号" prop="serialNumber" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.serialNumber" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendOne == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="生产批号" prop="extendOne" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendOne" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendTwo == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="商品批次" prop="extendTwo" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendTwo" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendThree == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展3" prop="extendThree" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendThree" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendFour == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展4" prop="extendFour" style="margin-right:15px" label-width="120px">
              <el-input v-model="form.extendFour" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendFive == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展5" prop="extendFive" style="margin-right:15px" label-width="120px">
              <el-date-picker
                v-model="form.extendFive"
                value-format="yyyy-MM-dd"
                align="right"
                style="width:75%"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="this.form.batchRuleVO.extendSix == 1">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="扩展6" prop="extendSix" style="margin-right:15px" label-width="120px">
              <el-date-picker
                v-model="form.extendSix"
                value-format="yyyy-MM-dd"
                align="right"
                style="width:75%"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSave">保 存</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import { inventoryDetail, inventoryAdjust } from '@/api/store'
  import inventoryStatusSelect from '@/views/components/inventoryStatusElSelect.vue'

  Vue.use(VXETable)
  export default {
    components:{
      inventoryStatusSelect
    },
    props: {
      batchCode: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        key: 0,
        form: {
          code:'',
          goodsBarCode: '',
          goodsName: '',
          goodsUnit: '',
          goodsUnitName: '',
          quantity: 0,
          useQuantity: 0,
          adjustQuantity: 0,
          status: '',
          gmtManufacture: '',
          gmtExpire: '',
          gmtStock: '',
          supplier: '',
          serialNumber: '',
          extendOne: '',
          extendTwo: '',
          extendThree: 0,
          extendFour: 0,
          extendFive: null,
          extendSix: null,
          // 批次规则，0：不显示，1：显示；
          batchRuleVO: {
            gmtManufacture: 0,
            gmtExpire: 0,
            gmtStock: 0,
            supplier: 0,
            serialNumber: 0,
            extendOne: 0,
            extendTwo: 0,
            extendThree: 0,
            extendFour: 0,
            extendFive: 0,
            extendSix: 0,
          },
        },
        loading: false,
        rules: {
          adjustQuantity: [
            {required: true, message: '请填写调整数量', trigger: 'blur'},
            { pattern: /^\d{0,14}(\.\d{0,6})?$/, message: '调整数量需大于0，小数点前限制14位小数点后限制6位' }
          ],
          goodsStatus: [
            {required: true, message: '请选择货品状态', trigger: 'blur'},
          ],
        },
        extendRules: {
          gmtManufacture: [
            {required: true, message: '请填写生产日期', trigger: 'blur'},
          ],
          gmtExpire: [
            {required: true, message: '请填写过期日期', trigger: 'blur'},
          ],
          supplier: [
            {required: true, message: '请填写供应商', trigger: 'blur'},
          ],
          serialNumber: [
            {required: true, message: '请填写序列号', trigger: 'blur'},
          ],
          extendOne: [
            {required: true, message: '请填写生产批号', trigger: 'blur'},
          ],
          extendTwo: [
            {required: true, message: '请填写商品批次', trigger: 'blur'},
          ],
          extendThree: [
            {required: true, message: '请填写扩展3', trigger: 'blur'},
          ],
          extendFour: [
            {required: true, message: '请填写扩展4', trigger: 'blur'},
          ],
          extendFive: [
            {required: true, message: '请填写扩展5', trigger: 'blur'},
          ],
          extendSix: [
            {required: true, message: '请填写扩展6', trigger: 'blur'},
          ],
        },
        batchRule: ['gmtManufacture', 'gmtExpire', 'gmtStock', 'supplier', 'serialNumber',
          'extendOne', 'extendTwo', 'extendThree', 'extendFour', 'extendFive', 'extendSix'],
        statusList: [
          {label: '合格', value: "0" },
          {label: '不合格', value: "1" },
        ]
      }
    },
    created() {
      this.initInfo()
    },
    computed: {
      canUseQuantity() {
        return this.form.quantity - this.form.useQuantity;
      }
    },
    methods: {
      // 清理表单,查询数据
      initInfo(){
        inventoryDetail(this.batchCode).then(response=>{
          this.form = response.data;
          this.initExtendField();
        }).then(()=>{
          this.$refs.inventoryStatusSelectRef.init(this.form.shipmentCode);
          this.$refs.inventoryStatusSelectRef.setSelectValue(this.form.goodsStatus);
        })

      },

      // 库存状态
      setInventoryStatus(obj){
        this.form.goodsStatus = obj.code;
        this.form.goodsStatusName = obj.name;
      },

      initExtendField(){
        for(let key of this.batchRule){
           if(this.form.batchRuleVO[key] == 1){
             this.rules[key] = this.extendRules[key];
           }
        }
        this.key++;
      },

      // 保存
      funcSave() {
        const data = this.form
        this.$refs['form'].validate((valid) => {
          if (valid) {
            inventoryAdjust(data).then(response => {
              if(response.status == 0){
                this.$emit("fatherCancel", "success");
              }else{
                this.$message.error(response.msg);
              }
            })
          }
        });
      },

    }
  }
</script>
<style lang="scss" scoped >
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
